<template>
    <div class="portrait" v-if="!loading">
        <comment ref="commentRef"></comment>
        <video-player></video-player>
        <subscribe></subscribe>
        <action />
    </div>
</template>

<script>
import liveInfo from '@/mixins/liveInfo'
import liveSetting from '@/mixins/liveSetting';
import comment from '@/components/comment'
import videoPlayer from '@/components/video-player'
import subscribe from '@/components/subscribe'
import action from '@/components/action'
import { mapGetters } from 'vuex';
import { getUserSig } from '@/api/user';
export default {
    mixins: [liveInfo, liveSetting],
    components: {
        comment,
        videoPlayer,
        subscribe,
        action
    },
    computed: {
        ...mapGetters(['avatar', 'nickname', 'userId']),
    },
    data() {
        return {
            liveId: '',
            loading: true
        }
    },
    async onLoad({ liveId }) {
        if (liveId) {
            this.liveId = liveId
            await this.$store.dispatch('user/getInfo');
            await this.loginIM();
            this.$store.commit('live/liveIdUpdate', liveId);
            this.mix_subscribeLiveStatus(liveId);
            this.mix_subscribeLiveAudit(liveId);
            this.fetchliveInfo(liveId);
        }
    },
    methods: {
        async loginIM() {
            const { userSig } = await getUserSig();

            this.$tim.login({
                userID: this.userId,
                userSig,
                userId: this.userId,
                avatar: this.avatar,
                username: this.nickname,
            });
        },
        async fetchliveInfo(liveId) {
            await this.$store.dispatch('live/fetchliveInfo', liveId);
            this.loading = false
            document.title = this.mix_liveInfo.name;
        },
    }
}
</script>

<style lang="scss" scoped>
.portrait {
    position: absolute;
    width: 100%;
    height: 100vh;
}



// 兼容iphonex样式
::v-deep .up-comment--active {
    &+.up-video-player {
        ._xgplay-video .xgplayer-controls {
            bottom: 54px !important;
        }
    }
}
</style>